<template>
  <view class="vipcard-container">
    <view class="card-background">
      <image
        class="bg-image"
        :src="cardInfo.bg_image"
        mode="aspectFill"
      ></image>
    </view>

    <scroll-view
      scroll-y="true"
      style="position: absolute; width: 100%; height: 100%"
    >
      <!-- 卡片图片 -->
      <view class="card-preview">
        <image
          class="card-image"
          :src="cardInfo.icon"
          mode="aspectFill"
        ></image>
      </view>
      <!-- background-color: pink;opacity: 0.4; -->
      <view
        class="card-info"
        style="position: absolute; width: 100%; margin-top: 10rpx"
      >
        <!-- <view class="section-title">
                    <image class="icon" :src="static_url + '/static/img/vip.png'" mode="aspectFit"></image>
                    <text>会员卡信息</text>
                </view> -->

        <!-- <parse :content="cardInfo.describe" @navigate="navigate"></parse>
                <view class="card-bottom" style="height: 100rpx;opacity: 0;">
                    <text>会员卡信息</text>
                </view> -->
        <!-- <view class="card-describe" v-for="(item, index) in cardInfo.describe_image" :key="index">
                    <image class="card-describe_image-img" :src="item" mode="aspectFill"></image>
                </view> -->

        <image
          class="card-describe_img"
          :src="cardInfo.describe_image"
          mode="aspectFill"
        ></image>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-btn-group2">
        <view class="card-balance">
          <text class="amount">¥{{ cardInfo.money_condition }} </text>
          <text class="label"> 起</text>
        </view>
        <button
          :style="{ background: t('color1') }"
          class="action-btn primary"
          @tap="handleBuy"
        >
          立即购买
        </button>
      </view>
    </view>

    <uni-popup id="dialogInput2" ref="dialogInput2" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="充值金额"
        value=""
        placeholder="请输入充值金额"
        @confirm="getRecharge"
      ></uni-popup-dialog>
    </uni-popup>
    <uni-popup id="dialogInput3" ref="dialogInput3" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="购买金额"
        value=""
        placeholder="请输入购买金额"
        @confirm="getbuy"
      ></uni-popup-dialog>
    </uni-popup>
    <loading v-if="loading"></loading>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      mid: 0,
      loading: false,
      allowShare: false, // 是否允许分享
      cardInfo: {
        // "id": 6,
        // "aid": 3,
        // "mid": 419,
        // "vip_card_config_id": 3,
        // card_name: "普通卡",
        // "card_num": "VIP25021715520338951",
        // "password": "111",
        // "money": "1.00",
        // "bind_mid": 0,
        // "status": 0,
        // "accumulate_money": "1.00",
        // "createtime": 1739778723,
        // "updatetime": 1739778723,
        // "bind_time": 0,
        // "unbind_time": 0,
        // card_desc: '普通卡普通卡普通卡普通卡',
        // bgImg: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/c3da2db730225037d00dab6bdb8d3fb5.jpg'
      },
      id: 0,
      share_title: "",
      share_path: "",
      share_imageUrl: "",
      pre_url: app.globalData.pre_url,
    };
  },
  onLoad(options) {
    this.mid = app.globalData.mid;
    this.id = options.id;
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getdata() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "MemberVipCard/configInfo?config_id=" + that.id,
        {},
        function (res) {
          if (res && res.status == 200) {
            that.cardInfo = res.data;
            if (that.cardInfo.password != "") {
              that.allowShare = true;
            }
            if (that.type == 0 && that.mid == that.cardInfo.mid) {
              that.getShare();
            }
            app.showLoading(false);
          } else {
            app.showLoading(false);
            app.error(res.msg);
          }
          that.loaded();
        }
      );
    },

    handleBuy() {
      var that = this;
      if (that.cardInfo.money_condition == 0) {
        that.$refs.dialogInput3.open();
      } else {
        that.buyCard();
      }
    },

    buyCard(val = this.cardInfo.money_condition) {
      let that = this;
      that.loading = true;
      app.post(
        "MemberVipCard/buyCard",
        { money: val, config_id: that.cardInfo.id },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            app.goto("/pages/pay/pay?id=" + res.payorderid);
          } else {
            app.error(res.msg);
            return;
          }
        }
      );
    },

    getShare() {
      let that = this;
      that.loading = true;
      app.post(
        "MemberVipCard/gift",
        { member_vip_card_id: that.id },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            (that.share_title = res.data.title),
              (that.share_path = res.data.url),
              (that.share_imageUrl = res.data.pic);
          } else {
            //app.error(res.msg);
          }
        }
      );
    },

    getRecharge(done, val) {
      var that = this;
      if (val == "") {
        app.error("金额不能为空");
        return;
      }
      that.loading = true;
      app.post(
        "MemberVipCard/recharge",
        { money: val, member_vip_card_id: that.cardInfo.id },
        function (res) {
          that.loading = false;
          if (res.status == 200) {
            app.goto("/pages/pay/pay?id=" + res.payorderid);
          } else {
            app.error(res.msg);
          }
        }
      );
    },
    getbuy(done, val) {
      var that = this;
      if (val == "") {
        app.error("金额不能为空");
        return;
      }
      that.buyCard(val);
    },
  },
  onShareAppMessage() {
    return {
      title: this.share_title,
      path: this.share_path,
      imageUrl: this.share_imageUrl,
    };
  },
};
</script>

<style lang="scss">
.vipcard-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 180rpx;

  .card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;

    .bg-image {
      width: 100%;
      height: 100%;
      // filter: blur(20px);
      // transform: scale(1.1);
      // opacity: 0.8;
    }
  }

  .card-header {
    background: #fff;
    padding: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;

    .card-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .card-preview {
    // width: 100%;
    width: auto;
    height: 350rpx;
    overflow: hidden;
    border-radius: 30rpx;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
    margin: 30rpx;

    .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;

    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }

  .card-description {
    // background: #fff;
    margin-top: 20rpx;

    .description-content {
      padding: 0 30rpx 30rpx;

      .desc-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 30rpx;
      }

      .benefit-list {
        display: flex;
        flex-wrap: wrap;

        .benefit-item {
          display: flex;
          align-items: center;
          width: 50%;
          margin-bottom: 20rpx;

          .benefit-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
          }

          text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }

  .card-info {
    // background: #fff;
    margin-top: 30rpx;
    height: 100%;

    .card-describe_img {
      width: 100%;
      height: 100%;
    }

    .info-list {
      padding: 0 30rpx 30rpx;

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          font-size: 28rpx;
          color: #666;
        }

        .value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }

  .bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20rpx;
    padding: 20rpx 30rpx;
    // background: #fff;
    // box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    z-index: 9;

    .action-btn {
      width: 310rpx;
      height: 105rpx;
      line-height: 105rpx;
      text-align: center;
      font-size: 32rpx;
      border-radius: 60rpx;
      margin: 0;
      position: absolute;
      right: 20rpx;
      bottom: 10rpx;

      &.primary {
        background: #ba1f25;
        color: #fff;
      }

      &.outline {
        background: #fff;
        color: #666;
        border: 2rpx solid #ddd;
      }

      &::after {
        border: none;
      }
    }
  }
}

.action-btn-group1 {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.action-btn-group2 {
  // display: flex;
  // justify-content: space-between;

  .card-balance {
    background: #fff;
    padding: 20rpx;
    border-radius: 40rpx;
    width: 450rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-balance,
  .card-price {
    .label,
    .price-label {
      font-size: 28rpx;
      opacity: 0.9;
    }

    .amount,
    .price-amount {
      font-size: 48rpx;
      font-weight: bold;
      margin-left: 20rpx;
    }
  }
}
</style>
